Angular এর টেম্পলেট সিনট্যাক্স HTML এবং Angular এর ডেটা বাইন্ডিং, ডিরেক্টিভস, এবং ইভেন্ট হ্যান্ডলিং সুবিধাগুলি সংযুক্ত করে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ইউআই তৈরি করতে ব্যবহৃত হয়। Angular টেম্পলেটে ডেটা বাইন্ডিং এবং ডিরেক্টিভস এর মাধ্যমে UI তৈরি এবং কম্পোনেন্টের মধ্যে ডেটা আদান প্রদান করা হয়। এখানে Angular এর টেম্পলেট সিনট্যাক্সের বিভিন্ন বৈশিষ্ট্য এবং তাদের ব্যবহার আলোচনা করা হবে।

১. ডেটা বাইন্ডিং (Data Binding)

Angular টেম্পলেটে ডেটা বাইন্ডিং বিভিন্ন উপায়ে কাজ করে, যেখানে কম্পোনেন্টের ডেটা এবং UI এর মধ্যে একে অপরকে সিঙ্ক্রোনাইজ করা হয়। Angular চার ধরনের ডেটা বাইন্ডিং সাপোর্ট করে:

১.১. Interpolation ({{ }})

Interpolation বা এক্সপ্রেশন বাইন্ডিং এর মাধ্যমে কম্পোনেন্টের প্রপার্টির মান HTML টেম্পলেটের মধ্যে সন্নিবেশ করা হয়।

<h1>{{ title }}</h1>

এখানে, title কম্পোনেন্টের একটি প্রপার্টি এবং তার মান h1 ট্যাগে প্রদর্শিত হবে।

১.২. Property Binding ([ ])

Property Binding এর মাধ্যমে HTML এলিমেন্টের প্রপার্টি (যেমন src, href, disabled ইত্যাদি) কম্পোনেন্টের প্রপার্টির মান দ্বারা সেট করা হয়।

<img [src]="imageUrl">

এখানে, [src] এর মাধ্যমে imageUrl কম্পোনেন্টের প্রপার্টির মান img ট্যাগের src অ্যাট্রিবিউটে দেওয়া হবে।

১.৩. Event Binding (( ))

Event Binding এর মাধ্যমে একটি ইভেন্ট (যেমন click, mouseenter, ইত্যাদি) কম্পোনেন্টের একটি মেথড বা ফাংশনের সাথে যুক্ত করা হয়।

<button (click)="onClick()">Click Me</button>

এখানে, (click) ব্যবহারকারী ক্লিক করার সাথে onClick() মেথডটি ট্রিগার হবে।

১.৪. Two-Way Data Binding ([( )])

Two-Way Data Binding এর মাধ্যমে কম্পোনেন্টের প্রপার্টি এবং UI এর মধ্যে একে অপরের মান সিঙ্ক্রোনাইজ করা যায়।

<input [(ngModel)]="name">

এখানে, [(ngModel)] ইনপুট ফিল্ডে পরিবর্তন হলে তা কম্পোনেন্টের name প্রপার্টিতে আপডেট হবে এবং বিপরীতভাবে।

২. ডিরেক্টিভস (Directives)

ডিরেক্টিভস হলো Angular এর শক্তিশালী বৈশিষ্ট্য যা HTML এলিমেন্টের আচরণ বা স্ট্রাকচার পরিবর্তন করে। Angular এ তিন ধরনের ডিরেক্টিভ ব্যবহৃত হয়: Structural Directives, Attribute Directives, এবং Component Directives।

২.১. Structural Directives

Structural directives HTML এর DOM স্ট্রাকচার পরিবর্তন করে। এগুলি * দিয়ে শুরু হয়।

• ngIf: শর্তসাপেক্ষভাবে একটি এলিমেন্টকে DOM-এ যোগ বা বাদ দেয়।

  <div *ngIf="isVisible">Content is visible</div>
  

• ngFor: একটি লিস্ট বা অ্যারে থেকে DOM-এ একাধিক এলিমেন্ট তৈরি করে।

  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>
  

• ngSwitch: একাধিক শর্ত পরীক্ষা করে এবং নির্দিষ্ট শর্তের ভিত্তিতে ভিন্ন ভিন্ন উপাদান প্রদর্শন করে।

  <div [ngSwitch]="color">
    <div *ngSwitchCase="'red'">Red</div>
    <div *ngSwitchCase="'green'">Green</div>
    <div *ngSwitchDefault>Default Color</div>
  </div>
  

২.২. Attribute Directives

Attribute Directives এলিমেন্টের প্রোপার্টি বা আচরণ পরিবর্তন করে। সাধারণত, এই ডিরেক্টিভগুলো এলিমেন্টের অ্যাট্রিবিউট হিসেবে ব্যবহৃত হয়।

• ngClass: ক্লাস অ্যাট্রিবিউট পরিবর্তন করে।

  <div [ngClass]="{ 'highlight': isHighlighted }">Highlighted text</div>
  

• ngStyle: ইনলাইন স্টাইল পরিবর্তন করে।

  <div [ngStyle]="{ 'color': color, 'font-size': fontSize }">Styled text</div>
  

• ngModel: টু-ওয়ে ডেটা বাইন্ডিং এর জন্য ব্যবহৃত হয়, যা UI এবং কম্পোনেন্টের প্রপার্টি একে অপরের সাথে সিঙ্ক্রোনাইজ করে।

  <input [(ngModel)]="username">
  

৩. পিপস (Pipes)

Pipes Angular এ ডেটাকে একটি নির্দিষ্ট ফরম্যাটে পরিবর্তন করার জন্য ব্যবহৃত হয়। এটি ডেটা ট্রান্সফরমেশন এর জন্য খুবই কার্যকর।

৩.১. Predefined Pipes

Angular অনেকগুলি প্রি-ডিফাইনড পিপ সরবরাহ করে:

• Date Pipe: ডেটা ফরম্যাটিং এর জন্য।

  <p>{{ today | date:'short' }}</p>
  

• Currency Pipe: একটি মানকে কারেন্সি ফরম্যাটে পরিবর্তন করে।

  <p>{{ price | currency }}</p>
  

• UpperCasePipe: টেক্সটকে বড় অক্ষরে পরিবর্তন করে।

  <p>{{ message | uppercase }}</p>
  

৩.২. Custom Pipes

Angular আপনাকে কাস্টম পিপ তৈরির অনুমতি দেয় যা নির্দিষ্ট ডেটা ফরম্যাটে রূপান্তরিত করে।

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

এবং HTML টেম্পলেটে:

<p>{{ 'Angular' | reverse }}</p>

৪. ডিরেক্টিভস এবং টেম্পলেট রেফারেন্স ভেরিয়েবলস

Angular টেম্পলেটে ডিরেক্টিভস এবং টেম্পলেট রেফারেন্স ভেরিয়েবলস ব্যবহার করে DOM এলিমেন্টের উপর কাজ করা যায়। আপনি # চিহ্ন ব্যবহার করে HTML এলিমেন্টকে একটি ভেরিয়েবল হিসাবে উল্লেখ করতে পারেন।

<input #myInput type="text">
<button (click)="logValue(myInput.value)">Log Value</button>

এখানে, #myInput একটি টেম্পলেট রেফারেন্স ভেরিয়েবল, যা ইনপুট ফিল্ডের মান সংগ্রহ করতে ব্যবহৃত হয়।

সারাংশ

Angular টেম্পলেট সিনট্যাক্সের মাধ্যমে আপনি কম্পোনেন্টের ডেটা বাইন্ডিং, ডিরেক্টিভস, পিপস এবং টেম্পলেট রেফারেন্স ভেরিয়েবলস ব্যবহার করে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ইউআই তৈরি করতে পারেন। এটি Angular অ্যাপ্লিকেশনের কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।